<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
</head>
<style>
    body{
        background-image: url(https://img1.baidu.com/it/u=925474969,3244178192&fm=253&fmt=auto&app=138&f=JPEG?w=750&h=422);
        /* background-repeat: repeat-x; */
        position:fixed;
        top: 0;
        left: 0;
        width:100%;
        height:100%;
        min-width: 1000px;
        zoom: 1;
        z-index:-10;
        background-repeat: no-repeat;
        background-size: cover;
        -webkit-background-size: cover;
        -o-background-size: cover;
        background-position: center 0;


    }
    fieldset{
        width: 500px;
        height: 300px;
        border-radius: 10px;
        margin: 0 auto;
        margin-top: 120px;
    }
</style>
<body>
<div id="app">

    <fieldset>
        <legend>用户注册</legend>
        <el-form :model="info" status-icon :rules="rules" ref="info" label-width="100px" class="demo-ruleForm">

            <el-form-item label="昵称" prop="nickname">
                <el-input v-model="info.nickname" style="width: 300px;">
                </el-input>
            </el-form-item>

            <el-form-item label="手机号" prop="telephone">
                <el-input v-model="info.telephone" oninput="value=value.replace(/[^\d]/g,'')" style="width: 300px;">
                </el-input>
            </el-form-item>

            <el-form-item label="验证码" prop="code">
                <el-input v-model="info.code" oninput="value=value.replace(/[^\d]/g,'')" style="width: 300px;">
                    <el-button slot="append" @click="sendCode()" id="foo">发送验证码</el-button>
                </el-input>
            </el-form-item>

            <el-form-item label="密码" prop="password">
                <el-input type="password" v-model="info.password" style="width: 300px;"></el-input>
            </el-form-item>

            <el-button type="primary" @click="submitForm('info')" style="margin-left: 150px;">提交</el-button>
            <el-button @click="denglu()">去登录</el-button>
            </el-form-item>
        </el-form>
    </fieldset>

</div>

<script>
    var haha = new Vue({
        el:"#app",
        data:{
            info:{},
            rules:{
                telephone: [
                    { required: true, message: '请输入手机号', trigger: 'blur' },
                ],
                nickname: [
                    { required: true, message: '请输入昵称', trigger: 'blur' },
                ],
                code: [
                    { required: true, message: '请输入验证码', trigger: 'blur' },
                ],
                password: [
                    { required: true, message: '请设置密码', trigger: 'blur' },
                ]
            }
        },
        methods:{
            denglu(){
                window.location.href = "/aaa/index.html"
            },
            submitForm(formName) {
                haha.$refs[formName].validate((valid) => {
                    if (valid) {
                        $.post("/aaa/register/add",haha.info,function (backData) {
                            if(backData.code == 1){
                                haha.$message.success("注册成功");
                                
                            }else {
                                haha.$message.error("注册失败");
                            }
                        })
                    }
                });
            },
            sendCode(){
                $.get("/aaa/register/sendCode?telephone="+haha.info.telephone,function (backData) {
                    if( backData.code == 1 ){
                        haha.$message.success("短信发送成功");
                        foo.disabled = "disabled";
                        var i = 59;
                        var  tt = setInterval(function () {
                            foo.innerHTML = "正在发送(" + i + "s)";
                            i--;
                            if (i == 0) {
                                //标题变成发送验证码
                                foo.innerHTML = "发送验证码";
                                //恢复点击效果
                                foo.disabled = "";
                                //停止定时器
                                clearInterval(tt);
                            }
                        }, 1000)
                    }else {
                        haha.$message.error("短信发送失败，请重试");
                    }
                })

            }
        }
    })
</script>

</body>
</html>